<script lang="tsx">
import amountImg from '~/assets/imgs/notify_amount.png';
import inviteImg from '~/assets/imgs/notify_invite.png';
import safeImg from '~/assets/imgs/notify_safe.png';
import setImg from '~/assets/imgs/notify_set.png';
import { Skeleton } from '~/components/skeleton';
import { closeNoticeById, readNotify } from './helpers';
import { TtNotifyType } from './NotificationItem.vue';

export function PersonalNoticeLoading() {
  return (
    <>
      {Array.from({ length: 2 }).map((_, i) => (
        <div class="mb-3 rounded-2 bg-sys-layer-b p4">
          <Skeleton key={i} class="grid gap-2">
            <Skeleton type="text" length={10} />
            <Skeleton type="text" length={25} />
            <Skeleton type="rect" width="auto" height={110} />
            <Skeleton type="text" length={55} />
            <Skeleton type="rect" width="auto" height={1} />
            <Skeleton type="text" length={6} />
          </Skeleton>
        </div>
      ))}
    </>
  );
}
</script>

<script lang="tsx" setup>
const emits = defineEmits<{
  confirm: [];
}>();

const typeList = reactive([
  { key: 1, img: inviteImg },
  { key: 2, img: amountImg },
  { key: 3, img: safeImg },
  { key: 4, img: setImg },
]);
// 消息类型：1 邀请 2 金额 3 安全 4 设置
// const router = useRouter();
function useTableList() {
  const queryParams = reactive<Api.GetParam<typeof apis.apiNoticePersonalLIst>>({});
  const noticeQry = useQuery({
    queryKey: [apis.apiNoticePersonalLIst.id],

    queryFn: () =>
      apis.apiNoticePersonalLIst(queryParams),
  });

  const listData = computed(() => noticeQry.data.value?.list ?? []);

  return {
    listData,
    noticeQry,
    queryParams,
  };
}

const { listData, noticeQry } = useTableList();

function filterMain(id: number | string) {
  const _id = Number(id);
  return typeList.filter(i => i.key === _id)?.[0]?.img;
}

function openDel(linkType: number, noticeId: number, orderNo?: string) {
  // 链接类型 1 充值记录 2 提币记录 3 Help center 4.帮助-隐私 5 帮助-公平   6帮助-支持
  // 7 帮助-费用  8 帮助-谷歌  9 帮助-faq  10 帮助-货币  11 帮助-注册  12 帮助-主页 16 注册送奖励
  readNotify({ type: TtNotifyType.USER, id: noticeId, orderNo, linkType, callback: () => {
    noticeQry.refetch();
  }, isPopup: [16].includes(linkType) });
  emits('confirm');
}
function readAll() {
  listData.value.filter(d => d.status === 2).forEach(d => closeNoticeById(d.notice_id, TtNotifyType.USER));
  readNotify({ type: TtNotifyType.USER, id: 0, callback: () => noticeQry.refetch() });
}

onActivated(noticeQry.refetch);

await noticeQry.suspense();
</script>

<template>
  <TSuspenseView v-bind="buildSvPropsOfQuery(noticeQry, { isEmptyFn: (d) => !d?.list })" outRender>
    <div class="grid mb-15 gap-5">
      <TCard v-for="(item, index) in listData" :key="index">
        <div class="mb-5 flex">
          <img v-if="filterMain(item.type)" :src="filterMain(item.type)" class="mr-5 h-11 w-11">
          <div class="flex-1">
            <div class="w-full flex-between">
              <div class="text-3.5 text-sys-text-body">
                {{ $d(item.create_time, 'full') }}
              </div>
              <div v-if="item.status === 2" class="h-4.5 flex items-center justify-center rounded-1 bg-green500 px-2 text-3">
                NEW
              </div>
            </div>
            <div class="mt-3 leading-normal">
              {{ item.title }}
            </div>
          </div>
        </div>
        <div class="flex-between cursor-pointer border-t-(1px slate700 solid) pt-3">
          <div class="flex items-center text-3.5 text-yellow500" @click="openDel(item.link_type, item.notice_id, item.order_no)">
            {{ $t('lR7XBmlaIGnwUavGdyn6Q') }}<i class="i-ion:ios-arrow-forward ml-1 text-3" />
          </div>
          <div v-show="item.status === 2" class="text-3 text-sys-text-body active:text-sys-text-head" @click="readNotify({ id: item.notice_id, type: TtNotifyType.USER })">
            {{ $t('xuQjqduVbRbUpVbrPk5fH') }} <i class="i-ri:checkbox-circle-line text-4" />
          </div>
        </div>
      </TCard>
    </div>
    <div
      class="pos-absolute bottom-0 left-0 right-0 mt-auto h-11.5 flex-center flex-none cursor-pointer bg-sys-layer-d text-sys-text-body font-600 active:text-sys-text-head"
      @click="readAll()"
    >
      <span class="text-3.5 leading-normal">{{ $t('xuQjqduVbRbUpVbrPk5fH') }}</span>
      <i class="i-ri:checkbox-circle-line ml-2 text-5" />
    </div>

    <template #empty>
      <TCard>
        <TEmpty />
      </TCard>
    </template>
  </TSuspenseView>
</template>
